<template>
  <section class="transfer">
    <el-dialog width="55%" :visible.sync="isShow" :fullscreen="fullscreen" :show-close="false" top="40px" :before-close="beforeClose">
      <el-row slot="title">
        <el-col :span="10" style="padding-top: 5px">
          <span>选择部门</span>
        </el-col>
        <el-col :span="2" :offset="11">
          <el-button type="text" v-if="!fullscreen" icon="iconfont ali-quanping" @click="fullscreen = true" style="float: right"></el-button>
          <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="fullscreen = false" style="float: right"></el-button>
        </el-col>
        <el-col :span="1">
          <el-button type="text" icon="iconfont ali-guanbi" @click="parentCloseEvent" style="float: right"></el-button>
        </el-col>
      </el-row>
      <section>
        <el-row>
          <el-col :span="11">
            <div class="tree_transfer">
              <!-- 导航箭头 -->
              <el-row style="background-color:#fff;padding: 10px 0 10px 15px; overflow: hidden;white-space:nowrap;">
                <el-button v-if="tree_nav.length > 2" icon="iconfont ali-shuangjiantou" @click="navRollBack(1)" type="text" class="nav_color"></el-button>
                <el-button v-else type="text" class="nav_color" @click="navRollBack(0)">通讯录</el-button>
                <i v-for="(nav,i) in tree_nav" :key="nav.name">
                  <i class="iconfont ali-jiantou" v-show="tree_nav.length > 2 && i!=0"></i>
                  <i class="iconfont ali-jiantou" v-show="tree_nav.length <= 2"></i>
                  <el-button type="text" class="nav_color" @click="navRollBack(2,nav,i)">{{nav.name}}</el-button>
                </i>
              </el-row>
              <el-row style="padding:2px">
                <!-- <el-checkbox v-model="checkAll" @change="checkAllChange">全选</el-checkbox> -->
                <el-checkbox-group v-model="checkedList">
                  <el-row v-for="(item,i) in cacheDepts" :key="item.id">
                    <i class="iconfont ali-wenjianjia" style="color:#B8E8FF;font-size:20px;margin-left:3px;"></i>
                    <el-checkbox :label="item.id" :key="item.id" @change="checkOne(item,$event)">{{item.label}}</el-checkbox>
                    <el-button type="text" class="nav_color" icon="iconfont ali-tree2" style="float:right" v-show="item.children" @click="linkTo(item)">下级</el-button>
                  </el-row>
                </el-checkbox-group>
              </el-row>
            </div>
          </el-col>
          <el-col :span="11" :offset="2">
            <div class="tree_transfer">
              <el-row v-for="user in userList" :key="user.id" style="background-color:#fff;padding: 5px 0 5px 15px">
                <el-col :span="5" style="padding-top: 5px">
                  <i class="iconfont ali-wenjianjia" style="font-size:20px;color:#B8E8FF"></i>
                </el-col>
                <el-col :span="16" style="padding-top:6px">
                  <span>{{user.label}}</span>
                </el-col>
                <el-col :span="3">
                  <el-button type="text" @click="remove(user)" icon="iconfont ali-close" style="margin-top:-3px"></el-button>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </section>
      <section slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveObj">保 存</el-button>
        <el-button @click="parentCloseEvent">取 消</el-button>
      </section>
    </el-dialog>
  </section>
</template>
<script>
/* 测试树形穿梭框 */
import { mapGetters } from 'vuex'

export default {
    name: "transfer",
    props:{
      isShow: Boolean,
    },
    data() {
        return {
            fullscreen: false,
            treeList: [],
            userList: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tree_nav: [], //调整部门 树结构上 导航
            cacheDepts: [],
            checkAll: false,
            checkedList: [],
        };

    },
    computed:{
        ...mapGetters([
            'menuDeptList'
        ])
    },
    methods: {
        saveObj(){//保存-传值
            this.$emit('getDepts',this.userList);
        },
        checkOne(obj,e){
            if(e){
                // if(this.userList.length >=1){
                //     this.$message.warning('只可以选择一个部门')
                //     e = false ;
                //     return ;
                // }
                this.userList.push(obj)
            }else{
                for(var j=0;j<this.userList.length;j++){
                    if(this.userList[j]==obj){
                        this.userList.splice(j,1)
                    }
                }
            }
        },
        checkAllChange(e){
            if(e){
                for(var i=0;i<this.cacheDepts.length;i++){
                    var cacheDept = this.cacheDepts[i];
                    if(this.checkedList.indexOf(cacheDept.id) < 0){
                        this.checkedList.push(cacheDept.id)
                    }
                    if(this.userList.length > 0){
                        if(this.userList.indexOf(cacheDept) < 0){
                            this.userList.push(cacheDept)
                        }
                    }else{
                        this.userList.push(cacheDept)
                    }
                }
                // this.userList.push(... this.cacheDepts)
            }else{
                for(var i=0;i<this.cacheDepts.length;i++){
                    var cacheDept = this.cacheDepts[i];
                    for(var j=0;j<this.userList.length;j++){
                        if(this.userList[j]==this.cacheDepts[i]){
                            this.userList.splice(j,1)
                            this.checkedList.splice(this.checkedList.indexOf(this.cacheDepts[i].id),1)
                        }
                    }
                }
            }
        },
        linkTo(item){//跳转下级
            this.checkAll = false;
            this.cacheDepts = item.children;
            this.tree_nav.push({
                name: item.label,
                data: item
            })
        },
        navRollBack(num,menu,index){//查看总通讯录 0 点击通讯录,跳转回总目录 1跳转前一个目录 2 跳转指定目录
            if(num === 0){
                this.cacheDepts = this.treeList;
                this.tree_nav = []
            }else if(num === 1){
                this.tree_nav.pop();
                let result = this.tree_nav[this.tree_nav.length - 1]
                this.cacheDepts = result.data.children;
            }else if(num === 2){
                let len = this.tree_nav.length - index - 1
                for (var i = 0; i < len; i++) {
                    this.tree_nav.pop();
                }
                this.cacheDepts = menu.data.children;
            }
            this.checkAll = false;
        },
        beforeClose(e){
            this.$emit('closeTransfer');
        },
        parentCloseEvent(){
            this.$emit('closeTransfer');
        },
        openTransfer(){
            this.userList = [];
            this.treeList = [];
            this.checkedList = []
            this.tree_nav = []
            this.checkAll = false;
            this.treeList = this.menuDeptList;
            this.cacheDepts = this.menuDeptList ;
        },
        remove(e){
            this.userList.splice(this.userList.indexOf(e),1)
            this.checkedList.splice(this.checkedList.indexOf(e.id),1)
        },
    },
    created(){
        this.treeList = this.menuDeptList;
        this.cacheDepts = this.menuDeptList ;
    }
}
</script>
<style lang="scss" scoped>
.tree_transfer {
  background-color: #f3f4f5;
  padding: 10px;
  border-radius: 5px;
}
._user {
  max-height: 450px;
  overflow: scroll;
}
.nav_color {
  color: #41b1ff;
}
</style>
